<form id="submit-form" class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post"
      autocomplete="off">
    <div class="layui-card-body">

        <div class="layui-form-item">
            <label class="layui-form-label">门店名称</label>
            <div class="layui-input-block">
                <input name="name" value='{$vo.name|default=""}' required placeholder="请输入设备名称" class="layui-input">
                <p class="help-block"></p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">门店编码</label>
            <div class="layui-input-block">
                <input name="encrypt" value='{$vo.encrypt|default=""}' required placeholder="请输入设备ID"
                       class="layui-input">
                <p class="help-block"></p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">省</label>
            <div class="layui-input-block">
                <select name="province" lay-filter="province" required>
                    <option value="">请选择</option>
                    {volist name="province" id="v"}
                    <option value="{$key}" {if isset($vo.province) && $key== $vo.province} selected {/if}>{$v}</option>
                    {/volist}
                </select>
                <input class="city-title" value="{$vo.province_name|default=''}" name="province_name" hidden>
                <p class="help-block"></p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">市 </label>
            <div class="layui-input-block">
                <select name="city" lay-filter="city" required>
                    <option value="">请选择</option>
                </select>
                <input class="city-title" value="{$vo.city_name|default=''}" name="city_name" hidden>
                <p class="help-block"></p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">区/县</label>
            <div class="layui-input-block">
                <select name="district" lay-filter="district" required>
                    <option value="">请选择</option>
                </select>
                <input class="city-title" value="{$vo.district_name|default=''}" name="district_name" hidden>
                <p class="help-block"></p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">门店地址</label>
            <div class="layui-input-block">
                <input name="address" value='{$vo.address|default=""}' required placeholder="请输入门店地址"
                       class="layui-input">
                <p class="help-block"></p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">门店联系电话</label>
            <div class="layui-input-block">
                <input name='tel' tel value='{$vo.tel|default=""}' required placeholder="请输入门店联系电话" class="layui-input">
                <p class="help-block"></p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">考勤</label>
            <div class="layui-input-block">
                <select name="check_work_id">
                    <option value="">请选择</option>
                    {volist name="check_work_attendance" id="v"}
                    <option value="{$key}" {if isset($vo.check_work_id) && $key== $vo.check_work_id} selected {/if}>{$v}</option>
                    {/volist}
                </select>
                <input class="city-title" value="{$vo.province_name|default=''}" name="province_name" hidden>
                <p class="help-block"></p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">合伙人</label>
            <div class="layui-input-block">
                <input name="partner_name" value='{$vo.partner_name|default=""}' placeholder="请输入合伙人"
                       class="layui-input">
                <p class="help-block"></p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">合伙人手机</label>
            <div class="layui-input-block">
                <input name="partner_phone" lay-verify='phone' value='{$vo.partner_phone|default=""}'
                       placeholder="请输入合伙人手机"
                       class="layui-input">
                <p class="help-block"></p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">类别</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="1" title="自营" {if !isset($vo.type)} checked{/if} {if isset($vo.type) && $vo.type==1 }checked{/if}>
                <input type="radio" name="type" value="2" title="联营" {if isset($vo.type) && $vo.type==2 }checked{/if}>
                <input type="radio" name="type" value="3" title="加盟" {if isset($vo.type) && $vo.type==3 }checked{/if}>
                <p class="help-block"></p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态 </label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="正常" {if !isset($vo.status)} checked{/if} {if isset($vo.status) && $vo.status==1 }checked{/if}>
                <input type="radio" name="status" value="2" title="关闭" {if isset($vo.status) && $vo.status==2 }checked{/if}>
                <p class="help-block"></p>
            </div>
        </div>
    </div>

    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}

    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit' id="submitBtn">保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
</form>
<script>
    form.render();

    $('#submitBtn').click(function () {
        let province = $('#submit-form select[name="province"]').val();
        let city = $('#submit-form select[name="city"]').val();
        let district = $('#submit-form select[name="district"]').val();
        let partner_phone = $('#submit-form input[name="partner_phone"]').val();

        if (!province) {
            layer.msg('请选择省', {time: 1000});
            return false;
        }
        if (!city) {
            layer.msg('请选择市', {time: 1000});
            return false;
        }
        if (!district) {
            layer.msg('请选择区', {time: 1000});
            return false;
        }
        if (partner_phone) {
            var pattern = /^1[34578]\d{9}$/;
            if (!pattern.test(partner_phone)) {
                layer.msg('请输入正确的手机号格式', {time: 1000});
                return false;
            }
        }
    })


    form.on('select(province)', function (data) {
        let pid = data.value;
        cityArray(pid, 'city')
        $('select[name="district"]').html('<option value="">请选择</option>')
        let name = data.elem[data.elem.selectedIndex].text;
        if (name && pid) {
            $('input[name="province_name"]').val(name);
        } else {
            $('input[name="province_name"]').val(name);
            $('input[name="city_name"]').val('');
            $('input[name="district_name"]').val('');
        }

    })
    form.on('select(city)', function (data) {
        let pid = data.value;
        cityArray(pid, 'district')

        let name = data.elem[data.elem.selectedIndex].text
        if (name && pid) {
            $('input[name="city_name"]').val(name);
        } else {
            $('input[name="city_name"]').val('');
            $('input[name="district_name"]').val('');
        }

    })

    form.on('select(district)', function (data) {
        let name = data.elem[data.elem.selectedIndex].text;
        if (data.value && name) {
            $('input[name="district_name"]').val(name);
        } else {
            $('input[name="district_name"]').val('');
        }
    })

    function cityArray(pid, city) {
        $.ajax({
            url: "{:url('distributor/cityArray')}",
            data: {'pid': pid},
            success: function (result) {
                let data = result.data;
                let selelt = $('select[name="' + city + '"]');
                selelt.html('<option value="">请选择</option>')
                $.each(data, function (index, value) {
                    // console.log(value.department_id);
                    selelt.append(new Option(value, index));// 下拉菜单里添加元素
                });
                form.render("select");//重新渲染 固定写法
            }
        });
    }

    city();

    function city() {
        let pid = {$vo['province'] |default = 0};
        let id = {$vo['city'] |default = 0};
        let city = 'city';
        cityString(pid, id, city)
    }

    district();

    function district() {
        let pid = {$vo['city'] |default = 0};
        let id = {$vo['district'] |default = 0};
        let city = 'district';
        cityString(pid, id, city)
    }

    function cityString(pid, id, city) {
        $.ajax({
            url: "{:url('distributor/cityArray')}",
            data: {'pid': pid},
            success: function (result) {
                let data = result.data;
                let selelt = $('select[name="' + city + '"]');
                selelt.html('<option value="">请选择</option>')
                $.each(data, function (index, value) {
                    // console.log(value.department_id);
                    if (id == index) {
                        selelt.append('<option value="' + index + '" selected>' + value + '</option>')
                    } else {
                        selelt.append(new Option(value, index));// 下拉菜单里添加元素
                    }
                });
                form.render("select");//重新渲染 固定写法
            }
        });
    }

    //自定义验证规则
    form.verify({
        required: [/[\S]+/, "必填项不能为空"],
        phone: [/(^$)|^1\d{10}$/, "请输入正确的手机号"],
        email: [/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
        url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],
        number: [/(^$)|^\d+$/, '只能填写数字'],
        date: [/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"],
        identity: [/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"]
    });

</script>



